<template>
    <div class="content">
        <div class="top">
            <div class="left">
                <img :src="imageUrl" alt="">
            </div>
            <div class="info">
                <div class="names">
                    <div class="name">{{ name }}</div>
                    <van-icon name="edit" style="color: #fff;" />
                </div>
                <div class="phone">{{ phone }}</div>
            </div>
        </div>
        <!-- <div class="orderContent">
            <div class="title">
                <div class="text">订单</div>
                <div class="arror">全部 ></div>
            </div>
        </div> -->
        <div class="systemList">
            <div class="item" @click="handleManage('0')">
                <van-icon name="edit" />
                <div class="text">个人信息</div>
                <van-icon name="arrow" />
            </div>
            <div class="item" @click="handleManage('1')">
                <van-icon name="location-o" />
                <div class="text">地址管理</div>
                <van-icon name="arrow" />
            </div>
            <div class="item" @click="handleManage('2')">
                <van-icon name="setting-o" />
                <div class="text">退出系统</div>
                <van-icon name="arrow" />
            </div>
        </div>
        <van-tabbar v-model="active" @change="onChange">
            <van-tabbar-item icon="home-o">首页</van-tabbar-item>
            <van-tabbar-item icon="search">订单</van-tabbar-item>
            <van-tabbar-item icon="friends-o">我的</van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script>
import { Dialog } from 'vant';
import { getUserInfo } from "@/api/reception"

export default {
    data() {
        return {
            active: '',
            name: '',
            phone: '',
            imageUrl: ''
        };
    },

    mounted() {
        this.name = localStorage.getItem('name').replaceAll('"', '')
        this.phone = localStorage.getItem('phone') || '暂无手机号'
    },
    created() {
        this.getUserInfo()
    },
    methods: {
        async getUserInfo() {
            const res = await getUserInfo()
            if (res.code == 200) {
                this.name = res.data.nickname
                this.phone = res.data.phone
                this.assetUrl = process.env.VUE_APP_ASSETSURL
                this.imageUrl = this.assetUrl + res.data.avatar
            }
        },
        onChange(flag) {
            this.active = flag
            if (flag == '0') {
                this.$router.push('/orderHome/receptionHome')
            } else if (flag == '1') {
                this.$router.push('/orderHome/orderManage')
            } else if (flag == '2') {
                this.$router.push('/orderHome/myCenter')
            }
        },

        handleManage(flag) {
            if (flag == '0') {
                this.$router.push('/orderHome/myInfo')
            } else if (flag == '1') {
                this.$router.push('/orderHome/myAdress')
            } else if (flag == '2') {
                Dialog.confirm({
                    title: '退出系统',
                    message: '确定要退出系统吗？',

                })
                    .then(() => {
                        localStorage.removeItem('Ctoken')

                        this.$router.push('/receptionLogin')
                    })
                    .catch(() => {
                        // on cancel
                    });
            }
        }
    },
};
</script>

<style lang="less" scoped>
.content {
    height: 100%;
    background-color: #f8fafb;

    .top {
        height: 200px;
        background-color: #ff6646;
        padding: 30px;
        display: flex;
        align-items: center;
        border-bottom-left-radius: 15px;
        border-bottom-right-radius: 15px;

        .left {
            img {
                width: 60px;
                height: 60px;
                border-radius: 50%;
                border: 2px solid #fff;
            }

            margin-right: 10px;
        }

        .info {
            display: flex;
            flex-direction: column;

            .names {
                display: flex;
                align-items: center;

                .name {
                    font-size: 22px;
                    color: #fff;
                    margin-right: 8px;
                }

                ::v-deep {
                    .van-icon {
                        color: #fff;
                    }
                }
            }

            .phone {
                margin-top: 8px;
                font-size: 14px;
                color: #fff;

            }
        }
    }

    .systemList {
        margin: 25px;
        background-color: #fff;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
        border-radius: 10px;

        .item {
            height: 60px;
            display: flex;
            align-items: center;
            border-bottom: 1px solid #f2f2f2;

            .van-icon {
                margin: 0 10px;
                font-size: 22px;

            }

            .text {
                font-size: 22px;
            }

            .van-icon-arrow {
                margin-left: auto;
            }
        }
    }

    .editBar {
        position: fixed;
        display: flex;
        bottom: 0;
        width: 100%;
        height: 60px;
        // background-color: red;
        justify-content: space-between;
        align-items: center;
        background-color: #fff;

        .my {
            margin-right: 28px;
        }

        .home .order .my {
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
}
</style>